<template>
    <el-main>
        <header>
            <el-form :model="searchForm" inline label-width="120px">
      <el-form-item label="企业名称">
        <el-input v-model="searchForm.companyName" placeholder="请输入企业名称"></el-input>
      </el-form-item>

      <el-form-item label="碳核算日期">
        <el-date-picker
          v-model="searchForm.carbonAccountingDate"
          type="date"
          placeholder="选择碳核算日期">
        </el-date-picker>
      </el-form-item>
<br/>
      <el-form-item label="交易类型">
        <el-select v-model="searchForm.transactionType" placeholder="请选择交易类型">
          <el-option
            v-for="(option, index) in transactionTypes"
            :key="index"
            :label="option.label"
            :value="option.value"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="年度总交易量范围" style="width: 400px;">
        <el-input v-model="searchForm.minTotalTransactions" style="width: 80px;" placeholder="最小值"></el-input>
        -
        <el-input v-model="searchForm.maxTotalTransactions" style="width: 80px;" placeholder="最大值"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="default" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
        </header>
        <el-table
      :data="tableData"
      style="width: 100%"
      max-height="400">
      <el-table-column prop="companyName" label="企业名称" width="180" fixed></el-table-column>
    <el-table-column prop="carbonAccountingDate" label="碳核算日期" width="120"></el-table-column>
    <el-table-column prop="carbonEmission" label="碳排放量(吨)" width="120"></el-table-column>
    <el-table-column prop="transactionTime" label="最新交易时间" width="150"></el-table-column>
    <el-table-column prop="latestTransactionType" label="最新交易类型" width="150"></el-table-column>
    <el-table-column prop="latestTransactionAmount" label="最新交易量(吨)" width="150"></el-table-column>

    <!-- 新增的列 -->
    <el-table-column prop="totalTransactions" label="年度总交易量(吨)" width="150"></el-table-column>
    <el-table-column prop="averageEmission" label="平均碳排放量(吨/月)" width="150"></el-table-column>
    
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-main>
  </template>
  <script>
  export default {
    data() {
      return {
        searchForm: {
        companyName: '',
        carbonAccountingDate: '',
        transactionType: '',
        minTotalTransactions: '',
        maxTotalTransactions: '',
      },
      transactionTypes: [
        { value: '买入', label: '买入' },
        { value: '卖出', label: '卖出' },
        // 添加其他交易类型...
      ],
        tableData: [
          {
            id: 1,
            companyName: '企业A',
            carbonAccountingDate: '2023-01-01',
            carbonEmission: 1000,
            transactionTime: '2023-02-01',
            latestTransactionType: '买入',
            latestTransactionAmount: 500,
            totalTransactions: 12000, // 示例年度总交易量
            averageEmission: 800, // 示例平均碳排放量（这里仅为示例，实际应根据数据计算）
          },
          {
            id: 2,
            companyName: '企业B',
            carbonAccountingDate: '2023-02-01',
            carbonEmission: 1100,
            transactionTime: '2023-03-01',
            latestTransactionType: '卖出',
            latestTransactionAmount: 450,
            totalTransactions: 10500,
            averageEmission: 700,
          },
          {
            id: 3,
            companyName: '企业C',
            carbonAccountingDate: '2023-03-01',
            carbonEmission: 900,
            transactionTime: '2023-04-01',
            latestTransactionType: '买入',
            latestTransactionAmount: 600,
            totalTransactions: 9200,
            averageEmission: 680,
          },
          {
            id: 4,
            companyName: '企业D',
            carbonAccountingDate: '2023-04-01',
            carbonEmission: 1150,
            transactionTime: '2023-05-01',
            latestTransactionType: '卖出',
            latestTransactionAmount: 700,
            totalTransactions: 11800,
            averageEmission: 820,
          },
          {
            id: 5,
            companyName: '企业E',
            carbonAccountingDate: '2023-05-01',
            carbonEmission: 1000,
            transactionTime: '2023-06-01',
            latestTransactionType: '买入',
            latestTransactionAmount: 550,
            totalTransactions: 13200,
            averageEmission: 950,
          },
        ],
      };
    },
  
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSearch() {
      // 在这里实现根据搜索条件过滤数据的功能
      // 根据实际情况调整过滤逻辑
      this.tableData = this.filterTableData();
    },
    
    resetForm() {
      this.searchForm = {
        companyName: '',
        carbonAccountingDate: '',
        transactionType: '',
        minTotalTransactions: '',
        maxTotalTransactions: '',
      };
      // 如果需要重置表格数据，请在这里还原原始数据
      // this.tableData = [...]; // 还原为初始或所有数据
    },

    filterTableData() {
      // 实现根据筛选条件过滤数据的方法
      // 这里仅作演示，实际中请根据具体的业务逻辑进行过滤
      return this.tableData; // 假设 originalTableData 是未经过滤的原始数据
    },

    },
  };
  </script>